{%- liquid
  assign show_padding = true
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
      assign show_padding = false
    when 'black'
      assign background_color = 'bg-black'
  endcase
-%}

{%- liquid
  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
      assign btn_style = 'light'
      assign richtext_link_style = 'richtext-link-light'
    else
      assign text_color = ''
      assign btn_style = 'primary'
      assign richtext_link_style = 'richtext-link-default'
  endcase

  case section.settings.button_set_style
    when 'solid_with_outline'
      assign first_button_class = 'mx-2 btn-'
      assign second_button_class = 'mx-2 btn-outline-'
      assign parent_class = 'mx-n2'
    when 'solid_with_text_link'
      assign first_button_class = 'mx-3 btn-'
      assign second_button_class = 'mx-3 btn-link link-'
      assign parent_class = 'mx-n3'
    when 'outline'
      assign first_button_class = 'mx-2 btn-outline-'
      assign second_button_class = 'mx-2 btn-outline-'
      assign parent_class = 'mx-n2'

    when 'outline_with_text_link'
      assign first_button_class = 'mx-3 btn-outline-'
      assign second_button_class = 'mx-3 btn-link link-'
      assign parent_class = 'mx-n3'
    when 'text_link'
      assign first_button_class = 'mx-3 btn-link link-'
      assign second_button_class = 'mx-3 btn-link link-'
      assign parent_class = 'mx-n3'
  endcase
-%}

{%- liquid
  assign image_per_row = section.settings.image_per_row
  case image_per_row
    when 3
      assign image_sizes = '(min-width: 1024px) 384px, (min-width: 600px) 220px, 282px'
    when 4
      assign image_sizes = '(min-width: 1024px) 282px, (min-width: 600px) 220px, 282px'
    when 5
      assign image_sizes = '(min-width: 1024px) 220px, (min-width: 600px) 220px, 282px'
  endcase

     assign mark = 'h2'
    if section.settings.enable_adjust_h_tag
      assign mark = section.settings.adjust_h_tag_to
    endif
    
-%}
<link rel="stylesheet" href="{{ 'media-cards-index.min.css' | asset_url }}">
{%- assign section_identifier = '#shopify-section-' | append: section.id -%}
{%- assign  padding_top = section.settings.padding_top | append:'px' -%}
{%- assign  padding_bottom = section.settings.padding_bottom | append:'px' -%}

{%- assign padding_mobile_top = section.settings.padding_top_mob | append: 'px' -%}
{%- assign padding_mobile_bottom = section.settings.padding_bottom_mob | append: 'px' -%}

{%- style -%}
 {{ section_identifier }} .py-section {
    padding-top: {{padding_top}};
    padding-bottom: {{padding_bottom}};
  }

 @media only screen and (max-width: 430px) {
    {{ section_identifier }} .py-section {
      padding-top: {{ padding_mobile_top }};
      padding-bottom: {{ padding_mobile_bottom }};
    }
  }

{{ section_identifier }} .sec_text_color,
  {{ section_identifier }} .sec_title_color {
    color: {{ section.settings.sec_title_color }};
  }
  {{ section_identifier }} .sec_title_color {
    font-weight: 700;
    font-size: 67.2px;
    line-height: 80.64px;
    letter-spacing: -2.69px;
  }
  {{ section_identifier }} .as-swiper-slide figure.img-wrapper {
    background: {{ section.settings.bg_container }};
    padding: 24px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  {{ section_identifier }} .as-swiper-slide {
    height: auto !important;
    margin-right: 20px;
  }

  {{ section_identifier }} .as-swiper-slide figure.img-wrapper picture {
    max-width: 100%;
    max-height: 140px;
    margin: 32.5px auto;
    height: 140px !important;
    display: flex !important;
}
{{ section_identifier }} .as-swiper-slide figure.img-wrapper picture img.object-fit-cover {
    max-width: 100%;
    width: 240px;
    height: auto;
    margin: 0 auto;
    position: unset;
    object-fit: contain;
}
{{ section_identifier }}  .as-swiper-slide figure.img-wrapper figcaption {
    margin-top: 24px;
}
.mb-32px {
  margin-bottom: 32px;
}
@media only screen and (max-width: 430px) {
  {{ section_identifier }} .as-swiper-slide {
    margin-right: 20px;
  }
  {{ section_identifier }} .sec_title_color {
    font-size: 36px;
    line-height: 43.2px;
    letter-spacing: -1.44px;
  }
}
{%- endstyle -%}

<div class="{% if show_padding %}py-section{% else %}my-section{% endif %} {{ background_color }} {{ text_color }}">
  <input class="as-media-cards-script" type="hidden" value="{{ 'media-cards.min.js' | asset_url }}" {% if request.design_mode %}data-design-mode="yes"{% endif %}>
  {%- liquid
    if section.settings.heading != empty or section.settings.text != empty
      assign show_content_container = true
    else
      assign show_content_container = false
    endif
  -%}
  {%- if show_content_container -%}
  <div class="container mb-32px">
    <div class="text-{% if section.settings.text_content_position == 'right' %}end{% elsif section.settings.text_content_position == 'center' %}center{% else %}start{% endif %}">
         {%- if section.settings.heading != blank -%}
            <{{ mark }} class="sec_title_color mb-0 section-title">{{ section.settings.heading }}</{{ mark }}>
          {%- endif -%}
      {%- if section.settings.text != empty -%}
        <div class="sec_text_color mt-2 no-last-margin richtext-with-link {{ richtext_link_style }}">
          {{ section.settings.text }}
        </div>
      {%- endif -%}
    </div>
  </div>
  {%- endif -%}

  {%- assign slide_blocks = section.blocks | where: 'type', 'slide' -%}
  {%- if slide_blocks.size > 0 -%}
    <div class="media-cards-container container-topic position-relative overflow-hidden as-media-cards-container">
      <div class="swiper as-swiper not-initialized swiper-rightwards">
        <div class="swiper-wrapper d-flex flex-nowrap">
          {%- for block in slide_blocks -%}
            {%- liquid
                case block.settings.image_height
                when 'small'
                  assign image_height = 'small-ratio' | append: ' object-fit-cover'
                when 'medium'
                  assign image_height = 'medium-ratio' | append: ' object-fit-cover'
                when 'large'
                  assign image_height = 'large-ratio' | append: ' object-fit-cover'
                when 'adapt_to_image'
                  assign image_height = 'adapt-to-image' | append: ' object-fit-cover'
              endcase
            -%}
            <div class="as-swiper-slide swiper-slide swiper-slide-card-{{ image_per_row }} swiper-slide-{{ block.id }} {% if forloop.first %}swiper-slide-active{% endif %}" {{ block.shopify_attributes }}>
              <figure class="img-wrapper mb-0">
                {%- if block.settings.content_position == 'top' -%}
                  {%- if block.settings.avatar != nil or block.settings.name != empty -%}
                    <figavatar class="d-flex mb-3 justify-content-{% if block.settings.text_content_position == 'right' %}end{% elsif block.settings.text_content_position == 'center' %}center{% else %}start{% endif %} align-items-center">
                      {%- if block.settings.avatar != nil -%}
                        <img
                          class="avatar img"
                          src="{{ block.settings.avatar | img_url: 'master' }}"
                          loading="lazy"
                          alt="{{ block.settings.avatar.alt | escape }}"
                          width="100%"
                          height="100%"
                        >
                      {%- endif -%}
                      {%- if block.settings.name != empty -%}
                        <h5 class="{%- if block.settings.avatar != nil -%}ms-3{%- endif -%} text-{% if block.settings.text_content_position == 'right' %}end{% elsif block.settings.text_content_position == 'center' %}center{% else %}start{% endif %} mb-0">{{ block.settings.name }}</h5>
                      {%- endif -%}
                    </figavatar>
                  {%- endif -%}
                  {%- if block.settings.content != empty -%}
                    <figcaption class="mb-md-4 mb-3 no-last-margin small text-{% if block.settings.text_content_position == 'right' %}end{% elsif block.settings.text_content_position == 'center' %}center{% else %}start{% endif %}">{{ block.settings.content }}</figcaption>
                  {%- endif -%}
                {%- endif -%}

                {%- if block.settings.image != nil -%}
                  <picture class="ratio d-block position-relative rounded-2 overflow-hidden"
                    style="--se-aspect-ratio: {{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100 }}%;">
                    {{ block.settings.image | image_url: width: block.settings.image.width | image_tag: loading: 'lazy', class: image_height, sizes: image_sizes, widths: '360, 480, 720, 960, 1200, 1920' }}
                  </picture>
                {%- else -%}
                  <div class="ratio ratio-3x4 bg-gray-400 rounded-2 overflow-hidden">
                    {% assign num = forloop.index | modulo: 5 | plus: 1 %}
                    {% assign placeholder = 'collection-' | append: num %}
                    {{ placeholder | placeholder_svg_tag: 'absolute-center placeholder-svg w-100 h-100' }}
                  </div>
                {%- endif -%}

                {%- if block.settings.content_position != 'top' -%}
                  {%- if block.settings.avatar != nil or block.settings.name != empty -%}
                    <figavatar class="d-flex justify-content-{% if block.settings.text_content_position == 'right' %}end{% elsif block.settings.text_content_position == 'center' %}center{% else %}start{% endif %} align-items-center">
                      {%- if block.settings.avatar != nil -%}
                        <img
                          class="avatar img"
                          src="{{ block.settings.avatar | img_url: 'master' }}"
                          loading="lazy"
                          alt="{{ block.settings.avatar.alt | escape }}"
                          width="100%"
                          height="100%"
                        >
                      {%- endif -%}
                      {%- if block.settings.name != empty -%}
                          <h5 class="{%- if block.settings.avatar != nil -%}ms-3{%- endif -%} text-{% if block.settings.text_content_position == 'right' %}end{% elsif block.settings.text_content_position == 'center' %}center{% else %}start{% endif %} mb-0">{{ block.settings.name }}</h5>
                      {%- endif -%}
                    </figavatar>
                  {%- endif -%}
                  {%- if block.settings.content != empty -%}
                    <figcaption class="no-last-margin small text-{% if block.settings.text_content_position == 'right' %}end{% elsif block.settings.text_content_position == 'center' %}center{% else %}start{% endif %}">{{ block.settings.content }}</figcaption>
                  {%- endif -%}
                {%- endif -%}
              </figure>
            </div>
          {%- endfor -%}
        </div>
        <div class="as-swiper-scrollbar d-none swiper-scrollbar position-relative mx-auto mt-5 mt-md-6"></div>
      </div>
    </div>
  {%- endif -%}
</div>

{% javascript %}
(function() {
  var $url = document.querySelector('.as-media-cards-script')
  if (!window.mediaCards && $url && $url.dataset.designMode !== 'yes') {
    window.mediaCards = $url.value

    var $script = document.createElement('script')
    $script.src = window.mediaCards
    $script.defer = "defer"
    document.body.appendChild($script)
  }
})()
{% endjavascript %}

{% schema %}
  {
    "name": "Media cards",
    "class": "media-cards as-media-cards",
    "tag": "section",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "default": "Image with text",
        "label": "Heading"
      },
      {
        "type": "richtext",
        "id": "text",
        "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
        "label": "Description"
      },
      {
        "type": "select",
        "id": "color_schema",
        "label": "Background color",
        "options": [
          {
            "value": "primary",
            "label": "Primary"
          },
          {
            "value": "secondary",
            "label": "Secondary"
          },
          {
            "value": "inverse",
            "label": "Inverse"
          },
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          },
          {
            "value": "transparent",
            "label": "Transparent"
          }
        ],
        "default": "white"
      },
      {
        "type": "checkbox",
        "id": "enable_adjust_h_tag",
        "label": "Enable adjust H tag",
        "default": false
      },
      {
        "type": "select",
        "id": "adjust_h_tag_to",
        "label": "Adjust the H tag to",
        "options": [
          {
            "value": "h1",
            "label": "H1"
          },
          {
            "value": "h2",
            "label": "H2"
          },
          {
            "value": "h3",
            "label": "H3"
          },
          {
            "value": "h4",
            "label": "H4"
          },
          {
            "value": "h5",
            "label": "H5"
          },
          {
            "value": "h6",
            "label": "H6"
          }
        ],
        "default":   "h3"
      },
      {
        "type": "color",
        "id": "sec_title_color",
        "label": "Section Content Color",
        "default": "#ffffff"
      },
      {
        "type": "select",
        "id": "text_content_position",
        "label": "Text Content Position",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "right",
            "label": "Right"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ],
        "default": "left"
      },
      {
        "type": "range",
        "id": "image_per_row",
        "min": 3,
        "max": 5,
        "step": 1,
        "default": 3,
        "label": "Image per row",
        "info": "Please add at least 3 slides."
      },
      {
        "type": "header",
        "content": "Columns Settings"
      },
      {
        "type": "select",
        "id": "text_color",
        "label": "Text color",
        "options": [
          {
            "value": "white",
            "label": "White"
          },
          {
            "value": "black",
            "label": "Black"
          }
        ],
        "default": "black"
      },
      {
        "type": "color",
        "id": "bg_container",
        "label": "Background Container",
        "default": "#ffffff"
      },
     {
        "type": "header",
        "content": "Kikstart Spacing Settings"
      },
      {
          "type": "range",
          "id": "padding_top",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "px",
          "label": "Padding top",
          "default": 64
        },
        {
          "type": "range",
          "id": "padding_bottom",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "px",
          "label": "Padding Bottom",
          "default": 64
        },
        {
          "type": "range",
          "id": "padding_top_mob",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "px",
          "label": "For Mobile Padding top",
          "default": 48
        },
        {
          "type": "range",
          "id": "padding_bottom_mob",
          "min": 0,
          "max": 100,
          "step": 1,
          "unit": "px",
          "label": "For Mobile Padding Bottom",
          "default": 48
        }
      
    ],
    "blocks":[
      {
        "type": "slide",
        "name": "Slide",
        "settings": [
          {
            "label": "Image",
            "type": "image_picker",
            "id": "image"
          },
           {
            "type": "select",
            "id": "image_height",
            "label": "Image height",
            "options": [
              {
                "value": "small",
                "label": "Small"
              },
              {
                "value": "medium",
                "label": "Medium"
              },
              {
                "value": "large",
                "label": "Large"
              },
              {
                "value": "adapt_to_image",
                "label": "Adapt to image"
              }
            ],
            "default": "adapt_to_image"
          },
          {
            "label": "Avatar",
            "type": "image_picker",
            "id": "avatar"
          },
          {
            "type": "text",
            "id": "name",
            "label": "Name"
          },
          {
            "type": "text",
            "id": "content",
            "label": "Content"
          },
          {
            "type": "header",
            "content": "Content Settings"
          },
          {
            "type": "select",
            "id": "content_position",
            "label": "Content Position",
            "options": [
              {
                "value": "top",
                "label": "Top"
              },
              {
                "value": "bottom",
                "label": "Bottom"
              }
            ],
            "default": "top"
          },
          {
            "type": "select",
            "id": "text_content_position",
            "label": "Text Content Position",
            "options": [
              {
                "value": "left",
                "label": "Left"
              },
              {
                "value": "right",
                "label": "Right"
              },
              {
                "value": "center",
                "label": "Center"
              }
            ],
            "default": "left"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Media cards",
        "blocks": [
          {
            "type": "slide"
          },
          {
            "type": "slide"
          },
          {
            "type": "slide"
          }
        ]
      }
    ]
  }
{% endschema %}
